<script setup>
const props = defineProps({
  navMenus: {
    type: Array,
    default: function () {
      return []
    }
  },
})
</script>

<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus">
      <el-menu-item v-if="navMenu.children == null || navMenu.children.length ===0"
                    :key="navMenu.id" :data="navMenu" :index="'/'+navMenu.code" :route="'/'+navMenu.code">
        <template #title>
          <el-icon><component :is="navMenu.icon"></component></el-icon>
          {{navMenu.name}}
        </template>
      </el-menu-item>

      <el-sub-menu v-if="navMenu.children && navMenu.children.length >0"
                  :key="navMenu.id" :data="navMenu" :index="'/'+navMenu.code">
        <template #title>
          <el-icon><component :is="navMenu.icon" ></component></el-icon>
          <span> {{navMenu.name}}</span>
        </template>

        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-sub-menu>
    </template>
  </div>
</template>



<style scoped>

</style>
